<template>

    <!--会员输入手机号键盘-->

    <el-dialog v-model="visible" class="phone-keyboard-dialog"  :title="title" width="400" @opened="dialogOpened">
        <div class="top_flex">
           
            <el-input v-model="phoneVal" size="large" placeholder="请输入手机号" maxlength="11" show-word-limit />
            <el-button type="danger" size="large" style="margin-left: 10px;" @click="clear">清空</el-button>
        </div>

        <div id="phone-keyboard" :class="[keyboardContainerClass]"></div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel" size="large">取消</el-button>
                <el-button type="primary" size="large" @click="confirmPhone">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script setup lang='ts'>
// @ts-nocheck
import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'

const props = withDefaults(defineProps<{ modelValue: boolean, inputVal: string, title?: string, validatePhone?: boolean,keyboardContainerClass: string }>(), { //validatePhone 表示是否校验手机号默认不校验
    title: '会员登录', validatePhone: false
})
const phoneVal = ref('')
watch(() => props.inputVal, (newVal) => {
    //console.log(newVal)
    phoneVal.value = newVal
})
const emit = defineEmits(['onChange', 'onKeyPress', 'update:modelValue', 'onConfirmPhone'])
function setKeyboardInput(val) {
    keyboard && keyboard.setInput(val)
}
defineExpose({ setKeyboardInput })
const visible = ref(props.modelValue)
let keyboard: any = null
let isInit = ref(true) //是否第一次初始化
function dialogOpened() { //Dialog 打开动画结束时的回调
    initKeyboard(isInit)
    //设置初始值
    keyboard && keyboard.setInput(phoneVal.value)
    
}


watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
    if (!newVal) {
        // keyboard &&keyboard.clearInput()
        // phoneVal.value = ''
        isInit = false
    }
       
 
})
watch(() => visible.value, (newVal) => {
    emit('update:modelValue', newVal)
})


function confirmPhone() {
    if (props.validatePhone) { //校验手机号
        if (phoneVal.value.length === 11) {
            visible.value = false
            emit('onConfirmPhone', phoneVal.value)
        } else {
            ElMessage({
                message: '请输入11位手机号',
                type: 'error'
            })
        }
    }else{
        visible.value = false
        emit('onConfirmPhone', phoneVal.value)
    }


}
//取消
function cancel() {
    visible.value = false
    // emit('onCancel')
}
//清空
function clear() {
    keyboard.setInput('')
    phoneVal.value = ''
}

const onKeyPress = (button) => {
    let input = keyboard.getInput()

    if (button === '{clear}') {//清空
        keyboard.setInput('')
    }
    if (button === '{confirm}') {//确认
        emit('update:modelValue', false)
    }
    emit('onKeyPress', button)
}
const onChange = (input) => {
    let filterInput = input.substr(0, 11)
    phoneVal.value = filterInput
    keyboard.setInput(filterInput)
    emit('onChange', filterInput)
}


//组件解绑之前 销毁keyboard实例，避免内存泄漏
onBeforeUnmount(() => {
    if (keyboard) {
        keyboard.destroy();
        keyboard = null
    }
})

//初始化keyboard
function initKeyboard(isInit) {

    let defaultLayout = [
        '1 2 3',
        '4 5 6',
        '7 8 9',
        '0 {bksp}',

    ]

    // console.log(defaultLayout)
    const options = {
        onChange,
        onKeyPress,
        layout: {
            default: defaultLayout,
        },
        display: {
            '{bksp}': '回退',
            '{clear}': '清空',
            '{confirm}': '完成',
            '{zf}': '+/-'
        },

    }
    if(isInit){
        keyboard = new Keyboard(`${props.keyboardContainerClass}`, options)
      
    }else{
        keyboard.setOptions(options)
    }
}





</script>
<style>
.phone-keyboard-dialog {
    position: absolute !important;
    left: 15px !important;
    top: 145px;
    margin: 0 !important;

}
</style>
<style lang='scss' scoped>
.top_flex {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.my-input {
    margin-bottom: 8px;

    :deep(.el-input__inner) {
        height: 50px !important;
        font-size: 20px;
    }

}

#phone-keyboard {
    :deep(.hg-button-bksp) {
        width: 20px;
    }

    :deep(.hg-button) {
        padding: 25px 5px;
        font-size: 20px;

        &[data-skbtn="0"] {
            flex: 2.4;
        }
    }








}
</style>
